export default function App() {
	return (
		<div>
		    <Child1></Child1>
		    <Child2></Child2>
		</div>
	);
}

function Child1(props) {
	const [ count, setCount ] = React.useState(0);
	React.useEffect(
		() => {
			alert(`child1:${count}`);
		},
		[ count ]
	);
	return (
		<div>
			<div>Child1 Number: {count}</div>
			<button onClick={() => setCount((v) => v + 1)}>Child1</button>
		</div>
	);
}

function Child2(props) {
	const [ count, setCount ] = React.useState(0);
	React.useEffect(
		() => {
			alert(`child2:${count}`);
		},
		[ count ]
	);
	return (
		<div>
			<div>Child2 Number: {count}</div>
			<button onClick={() => setCount((v) => v + 1)}>Child2</button>
		</div>
	);
}